<head>
  <title>Minimal PWA</title>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
  <link rel="manifest" href="manifest.json" />
  <link rel="stylesheet" type="text/css" href="main.css" />
  <link rel="icon" href="/e.png" type="image/png" />
</head>

<body>
  <div class="revision">Revision 8</div>
  <img src="" id="bg" />
  <div class="main-text">
    Minimal PWA, open Console for more!
  </div>
  <div class="network-message">
    Network:
    <span id="network-status" class="">Good</span>
  </div>

  <script type="text/javascript">
    if ("serviceWorker" in navigator) {
      navigator.serviceWorker.register("sw.js").then(function(registration) {
        console.log("注册成功", registration.scope);
        setTimeout(function() {
          var bg = document.querySelector("#bg");
          bg.src = "/pwa-fonts.png";
        }, 5000);
      });
    }

    fetch("./data.json");

    var statusEl = document.querySelector("#network-status");
    if (!navigator.onLine) {
      statusEl.classList = ["is-offline"];
      statusEl.innerText = "Offline";
    }

    // 监听
    window.ononline = () => {
      statusEl.classList.remove("is-offline");
      statusEl.innerText = "Good";
    };

    window.onoffline = () => {
      statusEl.classList.add("is-offline");
      statusEl.innerText = "Offline";
    };
  </script>
</body>
